<template>
  <page >
    <div class="goaddress" v-if="addressflag">
       <button @tap="tonewaddress">建地址阿</button>
    </div>
    <div class="huadong">
      <div class="huadong-box">
        <div v-if="toaddrflag" class="myad-wrap"  v-for="(item,index) in addressList" :key="index"  >
          <div class="wrap">
            <div class="wrap-top">
              我的收货地址
            </div>
            <div class="wrap-center">
              <div class="name">{{item.Receiver}}</div>
              <div class="adress">{{item.HouseNumber}}</div>
            </div>
            <div class="wrap-bottom">
              <div class="label">{{item.LaberTittle}}</div>
              <div class="de">
                {{item.Address}}
              </div>

            </div>
            <img  @tap="tobianji(item.GuoAddressId)" class="bj" src="../../../static/images/pj.png" alt="" />
          </div>

        </div>
      </div>

    </div>

    <div class="newaddress" @tap="tonewaddress" v-if="toaddrflag">
      新建地址~
    </div>
  </page>
</template>

<script>
  // Use Vuex

  export default {

    data() {
      return {
        addressflag:false,
        toaddrflag:false,
        addressList:[],
        thisID:'',
        laber:['家','公司','学校'],
        labertit:''

      }
    },
    methods: {
      tobianji(x){
        // console.log(x);

        wx.navigateTo({
          url: '/pages/bianji/main?index=' + x
        })
      },
      tonewaddress(){
        // console.log(x);

        wx.navigateTo({
          url: '/pages/bianji/main?index=' + this.index
        })
      },

    },
    beforeMount() {

    },
    computed:{

    },

    onShow(){
      let that=this;
      wx.request({
        url: 'http://192.168.1.20:8099/WebHandler/GuoUserHandler.ashx',
        method: 'post',
        data: {
          type: 'findUserAddress',
          userId:this.global.myID,
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值
        },
        success: function (res) {
          if(res.data.msg==="该地址不存在"){
            that.addressflag=true;
            that.addressList=[];
            that.toaddrflag=false;



          }else {
            that.toaddrflag=true;
            that.addressflag=false;
            that.addressList=res.data.address;
            console.log(that.addressList);
          }
        }
      })
    }


  }
</script>

<style >
  .myad-wrap{
    height: 230rpx;
    width:100%;
    border-bottom: 1px solid #ccc;
    background-color: #fff;

  }
  .wrap{
    height: 100%;
    width:90%;
    margin:0 auto;

    position: relative;
  }
  .wrap-top{
    height: 38%;
    width:100%;

    display:flex;
    align-items:center;
    font-size:30rpx;

  }
  .wrap-center{
    height:27%;
    width:100%;

    color:#ccc;
    display: flex;
    align-items: center;
    font-size:24rpx;

  }
  .wrap-bottom{
    height: 27%;
    width:80%;
    display:flex;
    align-items:center;


  }
  .name{
    margin-right: 20rpx;
  }
  .label{
    width:100rpx;
    color:#fff;
    background-color: #49B152;
    margin-right: 10rpx;
    text-align:center;


  }
  .de{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width:70%;
  }
  .bj{
    height: 40rpx;
    width: 40rpx;
    position: absolute;
    right:0;
    top: 140rpx;
  }
  button {
    outline: none;
    border: none;
    z-index: 1;
    position: relative;
    color: white;
    background: #262626;
    padding: 0.5em 1em;
    overflow: hidden;
    --shine-width: 1.25em;
  }

  button::after {
    content: "";
    z-index: -1;
    position: absolute;
    background: #595959;
    /* 核心代码：位置一步步调整 */
    top: -50%;
    left: 0%;
    bottom: -50%;
    width: 1.25em;
    transform: translate3d(-200%, 0, 0) rotate(35deg);
    /*  */
  }

  button:hover {
    cursor: pointer;
  }

  button:hover::after {
    transition: transform 0.5s ease-in-out;
    transform: translate3d(500%, 0, 0) rotate(35deg);
  }
  body{
    height: 100%;
  }
  .huadong{
    display: block;
    height: 87%;
  }
  .huadong-box{
    overflow:auto;
    height:100%;
  }
  .newaddress{
    height: 150rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    position: absolute;
    bottom:0;
    color:#ffffff;
    background-color: #49B152;
  }
</style>
